import 'package:flutter/material.dart';
import 'package:flutter_travel_concept/screens/home.dart';
import 'package:flutter_travel_concept/widgets/icon_badge.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  late PageController _pageController;
  int _page = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  void onPageChanged(int page) {
    setState(() {
      _page = page;
    });
  }

  void navigationTapped(int page) {
    _pageController.animateToPage(
      page,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

  Widget barIcon({
    required IconData icon,
    required int page,
    bool badge = false,
  }) {
    return IconButton(
      icon: badge ? IconBadge(icon: icon) : Icon(icon),
      color: _page == page
          ? Theme.of(context).colorScheme.secondary
          : Colors.blueGrey[300],
      onPressed: () => navigationTapped(page),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        physics: BouncingScrollPhysics(),
        controller: _pageController,
        onPageChanged: onPageChanged,
        children: [
          Home(),
          Center(child: Text('收藏夹')),
          Center(child: Text('消息中心')),
          Center(child: Text('个人中心')),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            SizedBox(width: 7.0),
            Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                barIcon(icon: Icons.home, page: 0),
                Text('首页',
                    style: TextStyle(
                        fontSize: 11,
                        color: _page == 0
                            ? Theme.of(context).colorScheme.secondary
                            : Colors.blueGrey[300]))
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                barIcon(icon: Icons.favorite, page: 1),
                Text('收藏',
                    style: TextStyle(
                        fontSize: 11,
                        color: _page == 1
                            ? Theme.of(context).colorScheme.secondary
                            : Colors.blueGrey[300]))
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                barIcon(icon: Icons.mode_comment, page: 2, badge: true),
                Text('消息',
                    style: TextStyle(
                        fontSize: 11,
                        color: _page == 2
                            ? Theme.of(context).colorScheme.secondary
                            : Colors.blueGrey[300]))
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                barIcon(icon: Icons.person, page: 3),
                Text('我的',
                    style: TextStyle(
                        fontSize: 11,
                        color: _page == 3
                            ? Theme.of(context).colorScheme.secondary
                            : Colors.blueGrey[300]))
              ],
            ),
            SizedBox(width: 7.0),
          ],
        ),
        color: Theme.of(context).primaryColor,
      ),
    );
  }
}
